<template>
  <div class="student">
    <!-- <app-header></app-header> -->
    <vue-better-scroll class="wrapper"
                       ref="scrollqq"
                       :scrollbar="scrollbarObj"
                       :pullDownRefresh="pullDownRefreshObj"
                       :pullUpLoad="pullUpLoadObj"
                       :startY='parseInt(startY)'
                       @pulling-down="onPullingDown"
                       @pulling-up="onPullingUp">
      <div class="main">
        <div class="topDiv">
          <label>请选择单位</label>
        </div>
        <div class="tips">注：1.无单位所属人员请选择“其它”单位；2.若系统内无您的单位名称，可将您的单位名称、所在区域、所属行业、联系电话、地址及社会信用代码发送至邮箱175864173@qq.com申请添加单位，工作人员将在1~2个工作日内为您处理</div>

        <input placeholder="请关键字搜索" class="search" v-model="listQuery.departName" />
        <div class="searchIcon" @click="search"></div>
        <div style="padding:0 15px;">
          <x-table :cell-bordered="false">
            <thead>
              <tr>
                <th width="80%">单位名称</th>
                <th width="20%">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in departList">
                <td>{{item.departName}}</td>
                <td>
                  <span class="btn1" @click="chooseDepart(item)">选择</span>
                </td>
              </tr>
            </tbody>
          </x-table>
        </div>
      </div>
    </vue-better-scroll>
  </div>
</template>

<script>
  import Header from "../../components/header";

  import { XInput, Group, XButton, Cell, Selector, CellBox, XTable } from "vux";
  import VueBetterScroll from "vue2-better-scroll"
  import { getVDepartPageList } from '@/api/depart'
  import { mapGetters } from 'vuex';
  export default {
    components: {
      "app-header": Header,
      XInput,
      XButton,
      Group,
      Cell,
      Selector,
      CellBox,
      XTable,
      VueBetterScroll
    },
    data() {
      return {
        demo02: null,
        list: [
          { key: "0", value: "男" },
          { key: "1", value: "女" }
        ],
        listQuery: {
          pi: 1,
          ps: 4,
          skipCount: 0,
          maxResultCount: 4,
          departName: ''
        },
        scrollbarObj: { fade: true },
        pullDownRefreshObj: {
          threshold: 90,
          stop: 40
        },
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据了"
          }
        },
        startY: 0,
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        departList: [],
        trainClassId: ''
      };
    },
    computed: {
      ...mapGetters([
        'id'
      ])
    },
    created() {
      this.trainClassId = this.$route.query.id;
      this.search();
    },
    methods: {
      search() {
        let that = this;
        that.listQuery.pi = 1;
        that.listQuery.skipCount = (that.listQuery.pi - 1) * that.listQuery.ps;
        getVDepartPageList(this.listQuery).then(response => {
          this.departList = response.items;
        })
      },
      fetchData() {
        let that = this;
        getVDepartPageList(this.listQuery).then(response => {
          this.departList = this.departList.concat(response.items);
          let totalAllCount = response.totalCount;
          let resultCount = this.trainClassList.length;
          if (parseInt(resultCount) < parseInt(totalAllCount)) {
            this.$refs['scrollqq'].forceUpdate(true);
          } else {
            this.$refs['scrollqq'].forceUpdate(false);
          }
        })
      },
      onPullingUp() {
        let limitcount = this.trainClassList.length;
        this.listQuery.skipCount = limitcount;
        this.fetchData();
      },
      onPullingDown() {
        this.search();
      },
      chooseDepart(item) {
        if (!this.trainClassId) {
          this.$router.push({ name: 'completeEnterpriseInfo', query: {  departId: item.id, departName: item.departName, industryId: item.industry, departArea: item.departArea.join(',') } });
        } else {
          if (this.id) {
            this.$router.push({ name: 'enterpriseApply', query: { id: this.trainClassId, departId: item.id, departName: item.departName, industryId: item.industry, departArea: item.departArea.join(',') } });
          } else {
            this.$router.push({ name: 'unitStudent', query: { id: this.trainClassId, departId: item.id, departName: item.departName, industryId: item.industry, departArea: item.departArea.join(',') } });
          } 
        }               
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .student .weui-cells__title {
    height: 40px;
    font-size: 15px;
    color: #2269ff;
    font-weight: bold;
    line-height: 40px;
    width: 90%;
  }

  .student .weui-cell {
    height: 50px;
    font-size: 15px;
    line-height: 50px;
    margin-right: 15px;
    font-weight: bold;
  }

  .student .weui-cell_select-after .weui-select {
    color: inherit !important;
    direction: rtl !important;
  }

  .student weui-input {
    color: #999999;
  }
</style>>
<style scoped>
  .main {
    padding: 0px 0px 25px 0px;
    text-align: left;
  }

  .tips {
    padding: 15px 34px;
    color: #2269ff;
    font-size: 11px;
    line-height: 18px;
    border-top: solid 1px #efeff4;
  }

  .btn1 {
    display: inline-block;
    height: 35px;
    font-size: 14px;
    background-color: #2269ff;
    line-height: 35px;
    width: 70px;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
  }

  .topDiv {
    padding: 10px 15px;
  }

    .topDiv label {
      color: #2269ff;
      font-size: 15px;
      font-weight: bold;
    }

  .search {
    margin: 0 25px;
    border: none;
    background-color: #eeeeee;
    width: auto;
    height: 34px;
    border-radius: 6px;
    font-size: 14px;
    color: #999999;
    padding-left: 20px;
    width: calc(100% - 70px);
  }

  .searchIcon {
    background: url("../../assets/images/search.png") no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    position: relative;
    top: -28px;
    left: calc(100% - 70px);
  }

  .vux-table {
    line-height: normal;
    border-collapse: collapse;
  }

    .vux-table th {
      border-top: 0;
      font-weight: bold;
      font-size: 15px;
      text-align: left;
    }

      .vux-table th:last-child {
        text-align: center;
      }

    .vux-table:after {
      border-top: none;
    }

    .vux-table td {
      font-size: 14px;
      text-align: left;
    }

    .vux-table td,
    .vux-table th {
      height: 50px;
      padding: 0 auto;
    }

  thead {
    border: 0;
  }
</style>
